<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv=X-UA-Compatible content="IE=edge,Chrome=1">
	<title>Document</title>
	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet" href="css/detailHtml.css">
</head>
<body>
	<!-- <h1>666</h1> -->
	<!-- <p id="p"></p> -->
	<!-- <button onclick="send()">给rn发信息</button> -->
	<div id="app" class="detail-box">
		<div class="title">
			<p>意大利男士手工鞋履的殿堂 BBLIO 概念集合店发布 2018 春夏系列新品</p>
		</div>
		<div class="introl-box">
			<img src="images/qian.png" alt="">
			<p>近日，集合来自意大利男士时尚精品品牌的概念集合店BBLIO于上海旗舰店举行2016春夏系列新品发布会，并一同发布了独家联名限量款。</p>
		</div>
		<p class="pull-time">发布4小时前</p>
		<div class="content-box">
			<p>
			近日，BBLIO 概念集合店于上海旗舰店举行 2016 春夏系列新品发布会。BBLIO 概念集合店代理来自意大利的男士时尚精品品牌，鞋履品牌包含 Il Gergo、Lidfort、Raparo 与 Silvano Sassetti，配饰类则包含顶级袜饰品牌Bresciani、高级鞋具品牌 Turms，以及手工领带品牌 Gianni Mura。
			</p>
			<p>
			BBLIO 代理的所有产品款式都是由两位联合创始人Lorenzo Torquati与Feng Lin亲自挑选，并针对亚洲男士的脚型，与品牌方沟通协调，生产出符合亚洲人需求的鞋型。本季RAPARO与BBLIO推出的独家联名限量款男士休闲鞋，鞋面皮革采用稀有的袋鼠皮，与手工制作的皮革装饰，内衬则是柔软舒适的小羊皮。
			</p>
			<img src="images/2.jpg" alt="">
			<p>
			近日，BBLIO 概念集合店于上海旗舰店举行 2016 春夏系列新品发布会。BBLIO 概念集合店代理来自意大利的男士时尚精品品牌，鞋履品牌包含 Il Gergo、Lidfort、Raparo 与 Silvano Sassetti，配饰类则包含顶级袜饰品牌Brescian。
			</p>
		</div>
		<div class="star-box">
			<div class="img-box collect">
				<img v-if="isZan" v-cloak src="images/hasZan.png" alt="">
				<img v-else v-cloak src="images/notZan.png" alt="">
			</div>
			<p>17</p>
		</div>
		<div class="share-collect-box">
			<div class="share-box">
				<span id="share-to">分享至：</span>
				<img style="width: 24px;height: 20px" src="images/wechat.png" alt="">
				<img style="width: 19px;height: 19px" src="images/friend.png" alt="">
			</div>
			<div class="collect-box">
				<span>收藏</span>
				<div class="collect-ico-box">
					<img v-if="isCollect" v-cloak style="width: 20px;height: 18px" src="images/hasCollect.png">
					<img v-else v-cloak style="width: 20px;height: 18px" src="images/notCollect.png">
				</div>
			</div>
		</div>
	</div>
	<script src="js/mui.min.js"></script>
	<script src="js/vue.js"></script>
	<script>
	mui.init();

	var app = new Vue({
    	el: '#app',
    	data: {
    		isZan: false,
    		isCollect: false,
    	},
    	methods: {

    	}
    })

	function send(){
		// 给rn传递数据
	    window.postMessage('这是web传回的信息！');
	}
	document.addEventListener('message', function(e) {
      // 接收webview传递过来的数据
      var data = e.data;
      if(data){
      	// 数据为‘给webview传递数据,这是rn传到webview的数据！’
      }
    });

    mui('body').on('tap','.img-box.collect',function(){
		app.isZan = !app.isZan;
	});

	mui('body').on('tap','.collect-ico-box',function(){
		app.isCollect = !app.isCollect;
	});
	</script>
</body>
</html>